<template>
    <div class="sysmorder">
      <!-- <h2>订单管理</h2> -->
      <div class="title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/sysout/sysoutshouye' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header">
          <el-input @change="search" v-model="input" placeholder="根据商品名、用户Id搜索"></el-input>
          <el-button type="primary">查询</el-button>
        </div>
        <div class="wrapper">
          <el-table :data="tableData" style="width: 100%" border stripe height="700">
            <el-table-column prop="orderNo" label="订单号" width="80"></el-table-column>
            <el-table-column prop="goodsId" label="商品号" width="80"></el-table-column>
            <el-table-column prop="goodsName" label="商品名" width="150"></el-table-column>
            <el-table-column prop="maxPrice" label="成交价" width="180"></el-table-column>
            <el-table-column prop="state" label="订单状态" width="180">
              <template v-slot:default="scope">
                <div v-if="scope.row.state==0">未支付</div>
                <div v-if="scope.row.state==1">已支付</div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="订单生成时间" width="180"></el-table-column>
            <el-table-column prop="userId" label="用户Id" width="100"></el-table-column>
            <el-table-column prop="userName" label="用户姓名" width="80"></el-table-column>
            <el-table-column prop="goodsImg" label="商品图片" width="150">
              <template v-slot:default="scope">
                    <el-image :src="scope.row.goodsImg" style="width:60px"/>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleClick(scope.row)">查看</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
          </el-table-column>
          </el-table>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'SysMorder',
    data() {
      return {
        input: "",
        tableData: [],
        allData:[]
      };
    },
    created() {
      this.getAllOrder()
    },
    methods: {
      // 获取所有订单
        getAllOrder(){
            axios.get("http://localhost:8080/api/getAllOrder/getAllOrderlist",{
              params:{
                id:1
              }
            }).then(
              res=>{
                for(var i= 0;i<res.data.length;i++){
                    var startTemp = Number(String(res.data[i].createTime).slice(11,13))+8
                    var startHour = startTemp%24 >= 10? startTemp%24 :'0'+startTemp%24
                    res.data[i].createTime = String(res.data[i].createTime).slice(0,10)+ ' ' + startHour + String(res.data[i].createTime).slice(13,19)
                }
                this.allData = res.data
                this.tableData = this.allData
                console.log("999",res)
                console.log(this.tableData)

              },
              error=>{
                console.log("88",error.message)
              }
            )
        },
        // 删除事件
        handleDelete(){

        },
        // 查看事件
        handleClick(){

        },
        // 查找事件
        search(val){
          console.log("搜索了----",val,this.allData[0].userId)
          this.tableData = []
          if(val == ' '){
            this.tableData = this.allData
          }else{
            for(var i=0;i<this.allData.length;i++){
              if(this.allData[i].goodsName.indexOf(val) !==-1||this.allData[i].orderNo==val){
              // if(this.allData[i].goodsName.indexOf(val) !==-1){
                this.tableData.push(this.allData[i])
              }
            }
            if(this.tableData == ''){
              alert("未找到你想要搜索的竞拍商品")
            }
          }
          console.log("查询结果为",this.tableData)
        }
    },

}
</script>

<style lang="less" scoped>
.sysmorder {
  margin: 20px;
  width: 95%;

    .title{
      width: 95%;
      padding: 10px;
      background: #fff;
      border: 1px solid #eee;
      margin-bottom: 20px;
    }

    .header {
      display: flex;
      margin-bottom: 10px;
      button {
        margin-left: 20px;
      }
    }
}
</style>